<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redis 发布订阅测试页面</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind CSS 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        neutral: '#64748b',
                        dark: '#1e293b',
                        light: '#f8fafc',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    
    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-custom {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen font-sans text-dark">
    <div class="container mx-auto px-4 py-12 max-w-5xl">
        <!-- 页面标题 -->
        <div class="text-center mb-12">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-primary mb-4">
                Redis 发布订阅测试
            </h1>
            <p class="text-neutral text-lg max-w-2xl mx-auto">
                这是一个简单的测试页面，用于演示Spring Boot 3.x与Redis发布订阅功能的集成
            </p>
        </div>

        <!-- 消息发布区域 -->
        <div class="grid md:grid-cols-2 gap-8">
            <!-- 普通消息发布 -->
            <div class="bg-white rounded-xl p-6 shadow-custom transition-custom hover:shadow-lg">
                <div class="flex items-center mb-4">
                    <i class="fa fa-paper-plane text-primary text-xl mr-3"></i>
                    <h2 class="text-xl font-semibold text-dark">发布普通消息</h2>
                </div>
                <div class="space-y-4">
                    <div>
                        <label for="normal-message" class="block text-sm font-medium text-neutral mb-1">消息内容</label>
                        <textarea id="normal-message" rows="4" class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="输入要发布的普通消息...">这是一条测试消息</textarea>
                    </div>
                    <button id="publish-normal-btn" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center transition-custom">
                        <i class="fa fa-send mr-2"></i> 发布消息
                    </button>
                </div>
            </div>

            <!-- 用户消息发布 -->
            <div class="bg-white rounded-xl p-6 shadow-custom transition-custom hover:shadow-lg">
                <div class="flex items-center mb-4">
                    <i class="fa fa-user text-secondary text-xl mr-3"></i>
                    <h2 class="text-xl font-semibold text-dark">发布用户消息</h2>
                </div>
                <div class="space-y-4">
                    <div>
                        <label for="user-message" class="block text-sm font-medium text-neutral mb-1">消息内容</label>
                        <textarea id="user-message" rows="4" class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-secondary/50 focus:border-secondary outline-none transition-custom" placeholder="输入要发布的用户消息...">这是一条用户消息</textarea>
                    </div>
                    <button id="publish-user-btn" class="w-full bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center transition-custom">
                        <i class="fa fa-send mr-2"></i> 发布用户消息
                    </button>
                </div>
            </div>

            <!-- 指定主题消息发布 -->
            <div class="bg-white rounded-xl p-6 shadow-custom transition-custom hover:shadow-lg">
                <div class="flex items-center mb-4">
                    <i class="fa fa-tags text-purple-500 text-xl mr-3"></i>
                    <h2 class="text-xl font-semibold text-dark">发布到指定主题</h2>
                </div>
                <div class="space-y-4">
                    <div>
                        <label for="custom-topic" class="block text-sm font-medium text-neutral mb-1">主题名称</label>
                        <input type="text" id="custom-topic" class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 outline-none transition-custom" placeholder="输入主题名称" value="custom-topic">
                    </div>
                    <div>
                        <label for="topic-message" class="block text-sm font-medium text-neutral mb-1">消息内容</label>
                        <textarea id="topic-message" rows="3" class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 outline-none transition-custom" placeholder="输入要发布的消息...">这是一条自定义主题的消息</textarea>
                    </div>
                    <button id="publish-topic-btn" class="w-full bg-purple-500 hover:bg-purple-500/90 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center transition-custom">
                        <i class="fa fa-send mr-2"></i> 发布到指定主题
                    </button>
                </div>
            </div>

            <!-- 用户对象消息发布 -->
            <div class="bg-white rounded-xl p-6 shadow-custom transition-custom hover:shadow-lg">
                <div class="flex items-center mb-4">
                    <i class="fa fa-user-circle text-indigo-500 text-xl mr-3"></i>
                    <h2 class="text-xl font-semibold text-dark">发布用户对象</h2>
                </div>
                <div class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="username" class="block text-sm font-medium text-neutral mb-1">用户名</label>
                            <input type="text" id="username" class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 outline-none transition-custom" placeholder="用户名" value="testuser">
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-medium text-neutral mb-1">邮箱</label>
                            <input type="email" id="email" class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 outline-none transition-custom" placeholder="邮箱" value="test@example.com">
                        </div>
                    </div>
                    <button id="publish-user-object-btn" class="w-full bg-indigo-500 hover:bg-indigo-500/90 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center transition-custom">
                        <i class="fa fa-send mr-2"></i> 发布用户对象
                    </button>
                </div>
            </div>
        </div>

        <!-- 响应结果区域 -->
        <div class="mt-12 bg-white rounded-xl p-6 shadow-custom">
            <div class="flex items-center mb-4">
                <i class="fa fa-server text-dark text-xl mr-3"></i>
                <h2 class="text-xl font-semibold text-dark">响应结果</h2>
            </div>
            <div class="bg-slate-50 rounded-lg p-4 h-48 overflow-y-auto" id="response-container">
                <p class="text-neutral italic">等待响应...</p>
            </div>
        </div>

        <!-- API文档链接 -->
        <div class="mt-12 text-center">
            <a href="/redis-pubsub/swagger-ui.html" target="_blank" class="inline-flex items-center px-6 py-3 bg-dark hover:bg-dark/90 text-white font-medium rounded-lg transition-custom">
                <i class="fa fa-book mr-2"></i> 查看API文档
            </a>
        </div>
    </div>

    <!-- 脚本部分 -->
    <script>
        // 基础URL
        const BASE_URL = '/redis-pubsub/api/redis';
        
        // 响应容器
        const responseContainer = document.getElementById('response-container');
        
        // 显示响应
        function showResponse(message, isError = false) {
            const timestamp = new Date().toLocaleTimeString();
            const responseItem = document.createElement('div');
            responseItem.className = `mb-3 p-3 rounded-lg ${isError ? 'bg-red-50 text-red-600 border border-red-200' : 'bg-green-50 text-green-600 border border-green-200'}`;
            responseItem.innerHTML = `
                <div class="flex justify-between items-center mb-1">
                    <span class="font-medium">${isError ? '错误' : '成功'}</span>
                    <span class="text-xs text-neutral">${timestamp}</span>
                </div>
                <div class="text-sm whitespace-pre-wrap">${message}</div>
            `;
            
            // 添加到容器顶部
            if (responseContainer.firstChild) {
                responseContainer.insertBefore(responseItem, responseContainer.firstChild);
            } else {
                responseContainer.appendChild(responseItem);
            }
            
            // 滚动到底部
            responseContainer.scrollTop = 0;
        }
        
        // 发送请求
        async function sendRequest(url, method, data) {
            try {
                const response = await fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data),
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const result = await response.text();
                showResponse(result);
                return result;
            } catch (error) {
                showResponse(error.message, true);
                console.error('Fetch error:', error);
            }
        }
        
        // 发布普通消息
        document.getElementById('publish-normal-btn').addEventListener('click', async () => {
            const message = document.getElementById('normal-message').value;
            if (!message.trim()) {
                showResponse('请输入消息内容', true);
                return;
            }
            await sendRequest(`${BASE_URL}/publish`, 'POST', message);
        });
        
        // 发布用户消息
        document.getElementById('publish-user-btn').addEventListener('click', async () => {
            const message = document.getElementById('user-message').value;
            if (!message.trim()) {
                showResponse('请输入用户消息内容', true);
                return;
            }
            await sendRequest(`${BASE_URL}/publish/user`, 'POST', message);
        });
        
        // 发布到指定主题
        document.getElementById('publish-topic-btn').addEventListener('click', async () => {
            const topic = document.getElementById('custom-topic').value;
            const message = document.getElementById('topic-message').value;
            
            if (!topic.trim()) {
                showResponse('请输入主题名称', true);
                return;
            }
            
            if (!message.trim()) {
                showResponse('请输入消息内容', true);
                return;
            }
            
            await sendRequest(`${BASE_URL}/publish/${topic}`, 'POST', message);
        });
        
        // 发布用户对象
        document.getElementById('publish-user-object-btn').addEventListener('click', async () => {
            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;
            
            if (!username.trim()) {
                showResponse('请输入用户名', true);
                return;
            }
            
            if (!email.trim()) {
                showResponse('请输入邮箱', true);
                return;
            }
            
            const user = {
                username: username,
                email: email,
                active: true,
                createTime: new Date().toISOString(),
                updateTime: new Date().toISOString()
            };
            
            await sendRequest(`${BASE_URL}/publish/user-object`, 'POST', user);
        });
    </script>
</body>
</html>